<template>
<div class="container">
  <div class="block">
    <div class="block-label">时间范围：</div>
    <el-date-picker v-model="timeValue"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="timestamp"
      :picker-options="pickerOptions">
    </el-date-picker>
    <div class="gap">
      <div class="gap-label">时间间隔：</div>
      <el-select v-model="selectValue" placeholder="时间间隔" :popper-append-to-body="false">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
      </el-select>
    </div>
  </div>
  <el-tabs tab-position="right" style="height: 600px;">
          <el-tab-pane label="基于证据数量">
            <div class="evidence-item">
              <img class="title-img" src="../assets/img/标题-箭头左.png" >
              <p class="title-font">各类型证据数量统计图</p>
              <img class="item-background" src="../assets/img/标题-线.png">
            </div>
            <div class="extras-features">
                <div class="data-view"></div>
                <div class="bar-view"></div>
                <div class="reset"></div>
                <div class="download"></div>
            </div>
            <div class="evidence-charts">
              <div class="left-pie">
                <p class="charts-title-font">阶段整体证据类型分布：</p>
                <div id="left-pie" style="width:500px;height:250px;"></div>
              </div>
              <div class="right-pie">
                <p class="charts-title-font">2020-8 证据类型：</p>
              </div>
            </div>
            <div class="bottom-charts">
                  <div id="polyline" style="width:800px;height:500px;"></div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="基于标记文件">
            <div class="evidence-item1">
              <img class="title-img" src="../assets/img/标题-箭头左.png" >
              <p class="title-font">各类型证据数量统计图</p>
              <img class="item-background" src="../assets/img/标题-线.png">
            </div>
            <div class="marked-charts">
              <div id="marked-bar" style="width:850px;height:450px;"></div>
            </div>
          </el-tab-pane>
          </el-tabs>
</div>
</template>

<script>
import { getEvidenceTag } from '../api/statics/index'
const echarts = require('echarts/lib/echarts')
export default {
  name: 'EvidencePanel',
  data () {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 时间选择器绑定数值
      timeValue: [],
      options: [{
        value: '选项1',
        label: '年'
      }, {
        value: '选项2',
        label: '月'
      }, {
        value: '选项3',
        label: '日'
      }],
      // 年月日选定值
      selectValue: ''
    }
  },
  mounted () {
    this.drawLeftPie()
    this.drawMarkedBar()
    this.PolyLine()
  },
  methods: {
    drawLeftPie () {
      this.myChartLeft = echarts.init(document.getElementById('left-pie'))
      this.myChartLeft.setOption({
        title: {
          text: '',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 403, name: '图片' },
              { value: 39, name: '音频' },
              { value: 387, name: '视频' },
              { value: 0, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              color: 'inherit',
              formatter: '{b}: {c}({d}%)'
            }
          }
        ]
      })
    },
    // 基于标记文件
    drawMarkedBar () {
      const myChartMarked = echarts.init(document.getElementById('marked-bar'))
      myChartMarked.setOption({
        legend: {
          orient: 'vertical',
          x: 'right',
          textStyle: {
            color: 'inherit',
            fontSize: '8'
          },
          data: ['标记音频', '未标记音频', '标记视频', '未标记视频', '标记图片', '未标记图片', '标记其他', '未标记其他']
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#1E314C', '#1E2E46'],
              opacity: 0.5
            }
          }
        },
        yAxis: {
          type: 'value',
          grigIndex: 0
        },
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0],
          start: 94,
          end: 100
        }],
        series: [{
          name: '标记音频',
          type: 'bar',
          data: [10, 12, 16, 13, 10, 16, 1, 23, 23, 3, 2, 3],
          symbolSize: 1
        },
        {
          name: '未标记音频',
          type: 'bar',
          data: [10, 1, 16, 3, 0, 23, 1, 23, 8, 4, 2, 3],
          symbolSize: 1
        },
        {
          name: '标记视频',
          type: 'bar',
          data: [10, 2, 6, 3, 10, 16, 1, 13, 23, 3, 2, 3],
          symbolSize: 1
        },
        {
          name: '未标记视频',
          type: 'bar',
          data: [8, 12, 16, 13, 10, 16, 1, 13, 13, 3, 2, 3],
          symbolSize: 1
        },
        {
          name: '标记图片',
          type: 'bar',
          data: [10, 2, 6, 13, 5, 16, 1, 23, 23, 3, 2, 3],
          symbolSize: 1
        },
        {
          name: '未标记图片',
          type: 'bar',
          data: [11, 5, 9, 3, 15, 6, 15, 3, 13, 23, 12, 6],
          symbolSize: 1
        },
        {
          name: '标记其他',
          type: 'bar',
          data: [11, 5, 9, 3, 5, 6, 5, 3, 13, 7, 12, 6],
          symbolSize: 1
        },
        {
          name: '未标记其他',
          type: 'bar',
          data: [1, 5, 9, 3, 15, 6, 9, 3, 13, 3, 12, 6],
          symbolSize: 1
        }]
      })
      window.onresize = function () {
        myChartMarked.resize()
      }
      getEvidenceTag({
        startTime: this.timeValue[0],
        endTime: this.timeValue[1]
      })
        .then((res) => {
          console.log('选定时间范围内按类型基于年月日统计证据文件总数--基于标记文件')
          console.log(res)
        })
    },
    // 基于证据数量折现与饼图联动
    PolyLine () {
      const chartDom = document.getElementById('polyline')
      const myChartLine = echarts.init(chartDom)
      const option = {
        // 折现提示框触发
        tooltip: {
          trigger: 'axis',
          showContent: false,
          color: 'inherit',
          textStyle: {
            align: 'right'
          }
        },
        dataset: {
          source: [
            ['product', '2020-9', '2020-10', '2020-11', '2020-12', '2021-1', '2021-2', '2021-3', '2021-4', '2021-5', '2021-6', '2021-7', '2021-8', '2021-9'],
            ['音频', 0, 0, 9, 12, 16, 13, 10, 16, 16, 9, 4, 0, 13, 14],
            ['视频', 0, 0, 12, 8, 9, 15, 16, 14, 14, 10, 6, 3, 7, 15],
            ['图片', 0, 0, 3, 6, 0, 4, 5, 7, 13, 9, 7, 14, 13, 2],
            ['其他', 0, 0, 8, 15, 9, 4, 12, 6, 13, 7, 8, 10, 5, 12]
          ]
        },
        xAxis: { type: 'category' },
        yAxis: { gridIndex: 0 },
        dataZoom: [{
          type: 'slider',
          show: true,
          xAxisIndex: [0]
        }],
        grid: { top: '55%' },
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: { focus: 'series' }
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '25%',
            center: ['75%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              color: 'inherit',
              formatter: '{b}: {@2012} ({d}%)'
            },
            encode: {
              itemName: 'product',
              value: '2020-9'
            }
          }
        ]
      }
      myChartLine.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0]
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1
          myChartLine.setOption({
            series: {
              id: 'pie',
              label: {
                color: 'inherit',
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension
              }
            }
          })
        }
      })
      myChartLine.setOption(option)
    }
  }
}
</script>

<style>
/* 日期选择器样式修改 */
.el-picker-panel__body-wrapper{
  width: 556px;
  background-color: #071831;
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar{
  width: 600px;
  background-color: #071831;
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel__sidebar{
  width: 80px;
  background-color: #071831;
}
.el-picker-panel__shortcut{
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
    margin-left: 80px;
}
.block {
  display: flex;
  flex-direction: row;
  width: 700px;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #409eff;
}
.block-label {
  font-size: 6px;
  color: #409EFF;
  line-height: 20px;
  margin-right: 10px;
}
.gap {
  display: flex;
  flex-direction: row;
  width: 300px;
}
.gap-label {
  font-size: 6px;
  color: #409EFF;
  line-height: 20px;
  margin-right: 10px;
  margin-left: 10px;
}
.el-range-editor.el-input__inner{
  background-color: #061733;
  width: 260px;
  height: 25px;
  font-size: 6px!important;
  border: 1px solid #409EFF;
}
.el-date-editor .el-range__icon{
  margin-bottom: 12px;
  line-height: 28px;
  color: #409EFF;
}
.el-range-separator{
  color: rgb(225, 230, 236) !important;
  line-height: 17px!important;
  font-size: 12px!important;
}
.el-date-editor .el-range__close-icon{
  line-height: 17px;
}
.el-range-editor .el-range-input {
  background-color: #061733;
  font-size: 6px;
}
.el-range-input{
  color: rgb(225, 230, 236) !important;
}
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
    height: 13%;
}
.el-tabs__item{
  color: aliceblue;
}
.el-tabs__item.is-active{
  color: #40e5ff;
}
.el-tabs__active-bar{
  background-color: #40e5ff;
}
.el-tabs__item:hover{
  color: #40e5ff;
}
</style>

<style scoped>
/* 证据数量 */
.evidence-item >>> .title-img{
 margin-top: 0;
 margin-bottom: -5px;
 margin-left: 20px;
}
.evidence-item >>> .title-font{
  margin-top: -15px;
  margin-left: 40px;
  margin-bottom: -12px;
  font-size: 1px;
}
.evidence-item{
  width: 290px;
  height: 16px;
}
.evidence-item1 >>> .title-img{
  margin-top: -5px;
  margin-bottom: 15px;
  margin-left: 20px;
}
.evidence-item1 >>> .title-font{
  margin-left: 40px;
  margin-bottom: -12px;
}
.evidence-charts{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 250px;
}
.charts-title-font{
  width: 200px;
  height: 12px;
  font-size: 12px;
  color: #409EFF;
  margin-top: 30px;
  margin-left: 20px;
  margin-bottom: 0;
}
/* 标题图片样式 */
.title-img{
  margin-top: -15px;
  margin-bottom: 20px;
}
/* 标题字体 */
.title-font{
  margin-top: -35px;
  margin-left: 20px;
  margin-bottom: -5px;
  font-size: 8px;
  color: aliceblue;
}
/* 标题 */
.item-background{
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 10px;
  width: 290px;
  height: 6px;
  margin-left: 20px;
}
/* 图表上的小图标 */
.extras-features{
  width: 200px;
  height: 20px;
  float: right;
  display: flex;
  flex-direction: row;
}
.data-view{
  background-image: url(../assets/img/数据视图-默认.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.data-view:hover{
  background-image: url(../assets/img/数据视图-点击.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.bar-view{
  background-image: url(../assets/img/柱状图-默认.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.bar-view:hover{
  background-image: url(../assets/img/柱状图-点击.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.reset{
  background-image: url(../assets/img/重置-默认.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.reset:hover{
  background-image: url(../assets/img/重置-点击.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.download{
  background-image: url(../assets/img/下载-默认.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.download:hover{
  background-image: url(../assets/img/下载-点击.png);
  background-size: 100% 100%;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
/* 标记文件标题 */
.evidence-item1 >>> .title-img{
  margin-top: -5px;
  margin-bottom: 15px;
  margin-left: 20px;
}
.evidence-item1 >>> .title-font{
  margin-left: 40px;
  margin-bottom: -12px;
}
/* 底部折线图 */
.bottom-charts{
  margin-top: -210px;
  width: 100%;
  height: 600px;
}
/* 日期选择器样式修改 */
.el-picker-panel__body-wrapper{
  width: 556px;
  background-color: #071831;
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel.el-date-range-picker.el-popper.has-sidebar{
  width: 600px;
  background-color: #071831;
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel__sidebar{
  width: 80px;
  background-color: #071831;
}
.el-picker-panel__shortcut{
  font-size: 8px;
  color: aliceblue;
}
.el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body {
    margin-left: 80px;
}
.block {
  display: flex;
  flex-direction: row;
  width: 700px;
  margin-bottom: 10px;
  margin-left: 19px;
}
.el-date-table td.in-range div, .el-date-table td.in-range div:hover, .el-date-table.is-week-mode .el-date-table__row.current div, .el-date-table.is-week-mode .el-date-table__row:hover div {
    background-color: #409eff;
}
.block-label {
  font-size: 6px;
  color: #409EFF;
  line-height: 20px;
  margin-right: 10px;
}
/* 下拉框样式 */
.gap >>> .el-input__inner {
  border-radius: 0;
  border: 1px solid #409EFF;
  background-color: #061d3c;
  height: 25px;
  width: 140px;
  line-height: 20px;
  margin-right: 10px;
  font-size: 4px;
  color: #fff;
}
.gap >>> .el-scrollbar{
  background-color: #111f3a;
  border-color: #073c75;
  color: #409EFF;
  font-size: 4px;
}
.gap >>> .el-input__icon {
  line-height: 20px;
  margin-right: 10px;
}
.gap >>> .el-select .el-input__inner {
  font-size: 6px;
}
.gap >>> .el-select-dropdown__item {
  font-size: 4px;
  color: #238cd6;
  height: 24px;
  line-height: 24px;
  background-color: #071831;
}
.gap >>> .el-select-dropdown__list {
  background-color: #071831;
}
</style>
